/*
 * @Author: hanyu 
 * @Date: 2018-05-14 14:19:04 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-06-20 16:46:43
 */
<template>
<bg-lay-out>
    <div slot="headerText">房联行数据中心</div>
    <div slot="main">
      <el-row class="flhViewBox">
          <el-col class="flhViewxLeftBox" :xl="7" :sm="7" :lg="7" :md="7">
            <div class="flhViewxLeftItem">
              <div class="whenMonth">
                    <p class="whenMonthTitle">总业绩(元)</p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="incomeSum"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        /></p>
                  </div>
                <div class="row">
                  <div class="whenMonth">
                    <p class="whenMonthTitle">门店数量</p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="storeNum"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        /></p>
                  </div>
                  <div class="whenMonth">
                    <p class="whenMonthTitle">累计房源</p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="houseNum"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        /></p>
                  </div>
                  <div class="whenMonth">
                    <p class="whenMonthTitle">累计成交量</p>
                    <p class="whenMonthNum">
                          <i-count-up
                          :startVal="startVal"
                          :endVal="dealNum"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        /></p>
                  </div>
                </div>
            </div>
            <div class="flhViewxLeftItem">
              <el-col>
                <chart-lay-out :showLine="false">
                  <span slot="title">成交户型统计</span>
                  <pie-chart slot="main" v-model="typeHouseArr"></pie-chart>
                </chart-lay-out>
              </el-col>
            </div>
          </el-col>
          <el-col class="flhViewxCenterBox" :xl="10" :sm="10" :lg="10" :md="10">
            <div class="flhViewxCenterItem">
              <b-map-h :mapHoverData = "mapHoverData" :hoverObj="hoverObj" @on-map="onMap"></b-map-h>
            </div>
          </el-col>
          <el-col class="flhViewxRigthBox" :xl="7" :sm="7" :lg="7" :md="7">
            <div class="flhViewxRigthItem">
              <el-col>
                <chart-lay-out :showLine="false">
                  <span slot="title">房源统计</span>
                  <pie-chart slot="main" v-model="regionalHouseArr"></pie-chart>
                </chart-lay-out>
              </el-col>
            </div>
            <div class="flhViewxRigthItem">
              <el-col>
                <chart-lay-out :showLine="false">
                  <span slot="title">成交收入统计</span>
                  <bar-chart slot="main" v-model="turnoverArr" :option="topRightLTopOption" :chartStyle="'width:440px;min-height:230px;height:300px;margin-left:40px;'"></bar-chart>
                </chart-lay-out>
              </el-col>
            </div>
          </el-col>
          <el-col class="row flhViewxBottomBox marginBot-30" :xl="24" :sm="24" :lg="24" :md="24">
            <div class="row flhViewxBottomItem">
              <el-col>
                <chart-lay-out>
                  <span slot="title">成交量统计</span>
                  <pie-chart slot="main" v-model="houseAmountArr"></pie-chart>
                </chart-lay-out>
              </el-col>
            </div>
            <div class="row flhViewxBottomItem">
              <el-col>
                <chart-lay-out>
                  <span slot="title">客源类型统计</span>
                  <pie-chart slot="main" v-model="hotChartArr"></pie-chart>
                </chart-lay-out>
              </el-col>
            </div>
            <div class="row flhViewxBottomItem">
              <div style="width:100%;position:relative">
                <div  class="topRightLLine" style="margin-top: 15px;">
                  <div class="topRightLTopTitleLine">
                  </div>
                  <span class="topRightLTopTitle">共享营销成交量</span>
                </div>
                  <chart :chartStyle="'min-height:200px;height:280px;margin-top:20px'"  :option="marketingOption" />
              </div>
              <div class="chartLine" style="height:290px"></div>
            </div>
            <div class="row flhViewxBottomItem">
              <el-col>
                <chart-lay-out :showLine="false">
                  <span slot="title">近半年成交趋势</span>
                  <line-chart slot="main" v-model="historyVolumeArr" :option="historyVolumeOption"></line-chart>
                </chart-lay-out>
              </el-col>
            </div>
          </el-col>
      </el-row>
</div>
</bg-lay-out>
</template>
<script>
import chart from "../../../../components/Charts/newChart";
import bMapH from "@/components/flh/bMapH";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import {
  HistoricalVolumeAnalysis,
  GetDataProfileInfo,
  GetDataByTargetForTwo,
  GetDataByDoubleTargetForTwo,
  GetSumDataByCity
} from "api/flh/home";
export default {
  name: "index",
  props: ["params"],
  components: {
    chart,
    bMapH,
    bgLayOut,
    ICountUp,
    pieChart,
    barChart,
    lineChart,
    chartLayOut
  },
  data() {
    return {
      houseAmountOption: {
        showLabel: true
      },
      historyVolumeOption: {
        grid: {
          width: "80%",
          left: "20%",
          top: "10%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        lineIconId: 0
      },
      typeHouseOption: {
        center: ["40%", "40%"],
        legend: {
          top: -5,
          right: "15%"
        }
      },
      topRightLTopOption: { grid: { left: "17%", bottom: "32%" }},
      marketingOption: {},
      hotChartArr: [],
      hoverObj: {
        storeNum: "", // 门店数量
        incomeSum: "", // 收入
        dealNum: "" // 成交
      },
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      storeNum: 0, // 门店数量
      houseNum: 0, // 房源量
      dealNum: 0, // 成交量
      incomeSum: 0, // 累计收入
      incomeSumArr: [],
      houseAmountParams: {
        startTime: "2018-01-01",
        endTime: "",
        districtId: "",
        storeId: "",
        queryType: "18005"
      },
      marketParams: {
        startTime: "2018-01-01",
        endTime: "",
        districtId: "",
        storeId: "",
        queryType: ""
      },
      typeHouseParams: {
        startTime: "2018-01-01",
        endTime: "",
        districtId: "",
        storeId: "",
        queryType: ""
      },
      hotChart: null,
      historyVolumeArr: [], // 历史成交量分析
      houseAmountArr: [], // 成交统计
      regionalHouseArr: [], // 房源统计
      turnoverArr: [], // 成交收入统计
      typeHouseArr: [], // 户型成交统计
      mapHoverData: [] // 地图hoverData
    };
  },
  methods: {
    // 获取地图hover 业绩
    async fetchMapHoverData() {
      try {
        var params = {
          cityId: 0
        }
        var res = await GetSumDataByCity(params)
        if (res.data.code === "0") {
          this.$set(this, "mapHoverData", res.data.result)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取总业绩
    async fetchSumResults() {
      try {
        var params = {
          queryType: "18027"
        };
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          this.$set(this, "incomeSum", res.data.result.total);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取门店数量
    async fetchStoreNum() {
      var self = this;
      try {
        var params = {
          startTime: "2018-01-01",
          endTime: this.$utils.parseTime(new Date()),
          districtId: "",
          storeId: "",
          queryType: "18001",
          cityId: 0
        };
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          self.storeNum = resData.targetGross;
          self.hoverObj.storeNum = resData.targetGross;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 区域客源统计
    async fetchHot() {
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18004"
      };
      var self = this;
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          self.houseNum = resData.total;
          this.$set(this, "hotChartArr", resData.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 户型成交统计
    async fetchTypeHouse() {
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18018"
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "typeHouseArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 房源统计
    async fetchRegionalHouse() {
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18003"
      };
      try {
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "regionalHouseArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 共享营销成交量
    async fetchMarketing() {
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18007"
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.initMarketingChat(resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交收入
    async fetchTurnover() {
      var self = this;
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18006"
      };
      try {
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var length = String(resData.targetGross).length;
          var aarr = ["¥"];
          for (let i = 0; i < length; i++) {
            const item = String(resData.targetGross)[i];
            self.incomeSumArr.push(item);
          }
          self.incomeSumArr = aarr.concat(self.incomeSumArr);
          this.hoverObj.incomeSum = resData.targetGross;
          this.$set(this, "turnoverArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 成交统计
    async fetchHouseAmount() {
      var params = {
        startTime: "2018-01-01",
        endTime: this.$utils.parseTime(new Date()),
        districtId: "",
        storeId: "",
        queryType: "18005"
      };
      try {
        var res = await GetDataProfileInfo(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.dealNum = resData.targetGross;
          this.hoverObj.dealNum = resData.targetGross;
          this.$set(this, "houseAmountArr", resData.targetDetailList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onMap(res) {
      this.$router.push({
        path: "cityAnalysis",
        query: {
          city: res.name, // 区域名称
          cityId: res.cityId
        }
      });
    },
    async fetchHistoryVolume() {
      try {
        const params = {
          cityId: 0
        };
        var res = await HistoricalVolumeAnalysis(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "historyVolumeArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 共享营销成交量
    initMarketingChat(res) {
      var xData = [];
      var yData = [];
      res.list.forEach(item => {
        xData.push(item.name);
        var obj = {};
        obj.name = item.name;
        obj.value = item.value;
        yData.push(obj);
      });
      var option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          extraCssText: "text-align:center;background-color:transparent",
          formatter: params => this.$utils.formatterModal(res.list, params, "")
        },
        legend: {
          data: xData,
          bottom: "40",
          textStyle: {
            color: "#31cee6"
          }
        },
        series: [
          {
            name: "共享营销",
            type: "funnel",
            top: "0",
            label: {
              normal: {
                position: "inside",
                formatter: "{c}\n\n{b}(人)",
                color: "#ffffff"
              },
              emphasis: {
                position: "inside",
                formatter: "{c}\n\n{b}(人)"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                opacity: 0.8
              }
            },
            data: yData
          }
        ]
      };
      this.$set(this, "marketingOption", option);
    },
    // 获取数据
    fetchData() {
      // 获取总业绩
      this.fetchSumResults();
      // 获取门店数据量
      this.fetchStoreNum();
      // 成交统计
      this.fetchHouseAmount();
      // 成交收入
      this.fetchTurnover();
      // 近半年成交趋势
      this.fetchHistoryVolume();
      // 共享营销成交量
      this.fetchMarketing();
      // 房源统计
      this.fetchRegionalHouse();
      // 户型成交统计
      this.fetchTypeHouse();
      // 客源类型统计
      this.fetchHot();
      // 获取地图hover数据
      this.fetchMapHoverData()
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.marginBot-30 {
  margin-bottom: 30px;
}
.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(#31cee6, .2);
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.flhViewBox {
  /* margin-top: 60px; */
  width: 100%;
  z-index: 100;
}
.flhViewBox .flhViewxLeftBox .flhViewxLeftItem,
.flhViewBox .flhViewxRigthBox .flhViewxRigthItem {
  width: 524px;
  height: 400px;
  /* padding: 10px 0px; */
  margin: 20px 4px 16px 0;
  @include moduleBg(bg_499x353);
}
.flhViewBox .flhViewxRigthBox .flhViewxRigthItem {
  margin: 20px 8px 16px 4px;
}
.flhViewBox .flhViewxCenterBox .flhViewxCenterItem {
  width: 748px;
  height: 820px;
  /* padding: 10px 0px; */
  margin: 20px 4px;
  @include moduleBg(bg_763x726);
}
.flhViewBox .flhViewxBottomBox {
  /* margin-left: 8px; */
  /* width: 1866px; */
  /* height: 350px; */
  color: #2ff0d2;
  text-align: center;
  @include moduleBg(bg_1813x393);
}
.flhViewBox .flhViewxBottomBox .flhViewxBottomItem {
  width: 100%;
  align-items: center;
}
.whenMonth {
  display: inline-block;
  position: relative;
  width: 100%;
  margin-top: 80px;
  color: #2ff0d2;
  text-align: center;
}
.whenMonth .whenMonthTitle {
  font-size: 24px;
}
/* .whenMonth .whenMonthTitle span {
  font-size: 100px;
} */
.whenMonth .whenMonthNum {
  @include din(58px);
}
.whenMonth .whenMonthTitle i {
  margin: 0 15px;
  font-style: normal;
}
.flhViewBox .flhViewxLeftBox .flhViewxLeftItem:first-child .row .whenMonth {
  width: 32.5%;
  text-align: center;
  color: #2ff0d2;
  margin-top: 40px;
  position: relative;
  display: inline-block;
}
.flhViewBox
  .flhViewxLeftBox
  .flhViewxLeftItem:first-child
  .row
  .whenMonth
  .whenMonthTitle {
  font-size: 16px;
}
.flhViewBox
  .flhViewxLeftBox
  .flhViewxLeftItem:first-child
  .row
  .whenMonth
  .whenMonthTitle
  i {
  margin: 0 15px;
  font-style: normal;
}
.flhViewBox
  .flhViewxLeftBox
  .flhViewxLeftItem:first-child
  .row
  .whenMonth
  .whenMonthNum {
  @include din(38px);
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
  color: #2ff0d2;
}
</style>